<template>
	<view class="page-content">
		<view class="page-top">
			<image class="t-logo" src="/static/index/logo.png"></image>
		</view>
		<!-- 未配对 v-show="pairStatu==='2'"-->
		<template v-if="pairStatu==='2'">
			<!-- 1-已配对 2-未配对  -->
			<view class="page-body2" @click="toPair">
				<!--进度条-->
				<d-progress borderWidth="40" :percent="percent3" progress_b_c="#3f90b8" progress_t_c="#12c5a7" size="big" width="340">{{percent0}}</d-progress>
			</view>
		</template>
		<!-- 已配对 v-show="pairStatu==='1'"-->
		<template v-else-if="pairStatu==='1'">
			<!-- 1-已配对 2-未配对  -->
			<view class="page-top" >
				<view class="page-top-l">
					<view class="t-tit">当前配对：Suelinan
						<text class="t-model"
							:style="{background:modelType==='1'?'#D70000':'#00CD8B'}">{{modelType==='1'?'激活版':'通用版'}}</text>
					</view>
				</view>
				<view class="page-top-r" v-if="modelType==='2'">
					<!-- 1-激活版  2-通用版 -->
					时间账户：60分钟<text class="icons icon-gengduo"></text>
				</view>
			</view>
			<!--内容-->
			<view class="page-body" >
				<view class="pro-box">
					<!--进度条一-->
					<view class="pro-box-item">
						<view class="pro-left"></view>
						<view class="pro-con">
							<!--进度条-->
							<d-progress :percent="percent1" progress_b_c="#08246e" progress_t_c="#00c9a7">{{percent1}}</d-progress>
						</view>
						<view class="pro-right" @click="start">
							<image class="but-ks" src="/static/index/icon-ks.png"></image>
						</view>
					</view>
					<view class="pro-con-txt">剩余：{{percent1}}/定时：60</view>
					<view class="t-button-b">
						<view class="t-button" @click="toRecharge">+加购</view>
					</view>
					<!--进度条二-->
					<view class="pro-box-item2">
						<view class="pro-left">
							<image class="but-r" src="/static/index/icon-l.png"></image>
						</view>
						<view class="pro-con">
							<!--进度条-->
							<d-progress :percent="percent2" progress_b_c="#00cba7" progress_t_c="#fcca32">{{percent2}}</d-progress>
						</view>
						<view class="pro-right" @click="start">
							<image class="but-r" src="/static/index/icon-r.png"></image>
						</view>
					</view>
					<view class="pro-con-txt">压力(0~280)</view>
					<!--进度条三-->
					<view class="pro-box-item2">
						<view class="pro-left">
							<image class="but-r" src="/static/index/icon-l.png"></image>
						</view>
						<view class="pro-con">
							<!--进度条-->
							<d-progress :percent="percent3"  progress_b_c="#6b1363" progress_t_c="#ec0014">{{percent3}}</d-progress>
						</view>
						<view class="pro-right" @click="start">
							<image class="but-r" src="/static/index/icon-r.png"></image>
						</view>
					</view>
					<view class="pro-con-txt">模式A B C D E F</view>
				</view>

				<view class="box-r">
					<block v-for="(item,index) in list" :key="index">
						<view class="li-box" @click="changeStatu(index,index.statu)">
							<view class="light-bg3" :class="item.statu===true?'animate3':''" :style="{background:item.bg3}">
								<view class="light-bg2" :class="item.statu===true?'animate2':''" :style="{background:item.bg2}">
									<view class="light-bg1" :class="item.statu===true?'animate1':''" :style="{background:item.bg1}">
										
									</view>
								</view>
							</view>
							<view class="light-name">{{item.name}}</view>
							<view class="light-bg"></view>
						</view>
						
					</block>

				</view>
			</view>
		</template>
	</view>
</template>

<script>
	/* import {
		mapMutations,
		mapState
	} from 'vuex' */
	import {
		mapGetters,
		mapActions
	} from "vuex";
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue";
	import wProgress from '@/components/w-progress/w-progress.vue';
	import dProgress from '@/components/w-progress/d-progress.vue';
	import wProgress2 from '@/components/w-progress/w-progress2.vue';
	export default {
		components: {
			cmdProgress,dProgress,
			wProgress,
			wProgress2
		},
		data() {
			return {
				//pairing_statu: '2', //1-已配对 2-未配对  
				//model_type: '1', //1-激活版  2-通用版
				percent0: '连接设备',
				percent1: 45,
				percent2: 70,
				percent3: 100,
				btnDis: false,
				process: 50,
				list: [{
					name: 'CH1',
					statu: true,
					bg1:'rgba(26, 171, 217, 1)',
					bg2:'rgba(26, 171, 217, .6)',
					bg3:'rgba(26, 171, 217, .2)'
				}, {
					name: 'CH2',
					statu: true,
					bg1:'rgba(0, 205, 139, 1)',
					bg2:'rgba(0, 205, 139, .6)',
					bg3:'rgba(0, 205, 139, .2)'
				}, {
					name: 'CH3',
					statu: true,
					bg1:'rgba(123, 204, 97, 1)',
					bg2:'rgba(123, 204, 97, .6)',
					bg3:'rgba(123, 204, 97, .2)'
				}, {
					name: 'CH4',
					statu: true,
					bg1:'rgba(245, 203, 55, 1)',
					bg2:'rgba(245, 203, 55, .6)',
					bg3:'rgba(245, 203, 55, .2)',
				}, {
					name: 'CH5',
					statu: true,
					bg1:'rgba(206, 139, 103, 1)',
					bg2:'rgba(206, 139, 103, .6)',
					bg3:'rgba(206, 139, 103, .2)',
				}, {
					name: 'CH6',
					statu: true,
					bg1:'rgba(166, 74, 151, 1)',
					bg2:'rgba(166, 74, 151, .6)',
					bg3:'rgba(166, 74, 151, .2)',
				}, {
					name: 'CH7',
					statu: true,
					bg1:'rgba(191, 37, 76, 1)',
					bg2:'rgba(191, 37, 76, .6)',
					bg3:'rgba(191, 37, 76, .2)',
				}, {
					name: 'CH8',
					statu: true,
					bg1:'rgba(215, 0, 0, 1)',
					bg2:'rgba(215, 0, 0, .6)',
					bg3:'rgba(215, 0, 0, .2)',
				}]
			}
		},
		computed: {
			...mapGetters(["modelType", "pairStatu"]),
		},
		onShow(){
			console.log(1234);
			if (this.pairStatu) {
				
			}else{
				this.setPairStatu('2');
			}
		},
		onLoad(option) {
			console.log(222, option)
			console.log(2223, this.modelType)
			console.log(2223, this.pairStatu)
			this.timer = setInterval(() => {
				this.process = this.process + 2;
				if (this.process > 100) {
					this.process = 0;
				}
			}, 100);
		},
		methods: {
			...mapActions("user", ["setModelType", "setPairStatu"]),
			//呼吸灯
			changeStatu(index,statu){
				if(this.list.length>0){
					this.list.forEach((item,ind) =>{
						if(index===ind){
							item.statu = !item.statu
						}
					})
				}
			},
			//跳转账户充值
			toRecharge(){
				uni.navigateTo({
					url: `/pages/account/recharge`
				})
			},
			//跳转设备列表
			toPair() {
				uni.navigateTo({
					url: `/pages/home/pair`
				})
			},
			start() {
				if (!this.btnDis) {
					this.countDown();
				} else {
					return
				}

			},
			// 倒计时
			countDown() {
				let t = null;
				let timer = parseInt(this.percent1); // *60
				this.btnDis = true;
				clearInterval(t);
				this.percent1 = parseInt(`${timer}`); // /60
				t = setInterval(() => {
					if (timer == 0) {
						clearInterval(t);
						this.percent1 = "";
						this.btnDis = false;
						return;
					}
					timer--;
					this.percent1 = parseInt(`${timer}`); // /60
				}, 1000)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.li-box{
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		.light-name{
			position: absolute;
			z-index: 3;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 72rpx;
			color: #fff;
		}
		.light-bg{
			position: absolute;
			z-index: 1;
			width: 10rpx;
			height: 100%;
			background: rgba(116,116,116,.3);
		}
		.light-bg3 {
			position: relative;
			z-index: 2;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 110rpx;
			height: 110rpx;
			border-radius: 55rpx;
			margin: 5rpx auto;
			.light-bg2 {
				position: relative;
				z-index: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90rpx;
				height: 90rpx;
				border-radius: 45rpx;
				.light-bg1 {
					position: relative;
					z-index: 2;
					width: 74rpx;
					height: 74rpx;
					border-radius: 37rpx;
					text-align: center;
				}
			}
		}
	}

	.animate1 {
		cursor: pointer;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-name: breathe1;
		-webkit-animation-duration: 800ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe1 {
		0% {
			opacity: 1;
			//box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
		}

		100% {
			opacity: 1;
			//border: 1px solid rgba(59, 235, 235, 0.7);
			//box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
		}
	}

	.animate2 {
		cursor: pointer;
		//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-name: breathe2;
		-webkit-animation-duration: 1400ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe2 {
		0% {
			opacity: .5;
			//box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
		}

		100% {
			opacity: 1;
			//border: 1px solid rgba(59, 235, 235, 0.2);
			//box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
		}
	}

	.animate3 {
		cursor: pointer;
		//box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		-webkit-animation-timing-function: ease-in-out;
		-webkit-animation-name: breathe3;
		-webkit-animation-duration: 1800ms;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
	}

	@-webkit-keyframes breathe3 {
		0% {
			opacity: .8;
			//box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset;
		}

		100% {
			opacity: 1;
			//border: 1px solid rgba(59, 235, 235, 0.2);
			//box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
		}
	}

	.pro-box {
		display: flex;
		flex-direction: column;
		margin-bottom: 100rpx;

		.pro-box-item {
			display: flex;

			.pro-left,
			.pro-right {

				.but-l,
				.but-r {
					width: 41rpx;
					height: 52rpx;
				}
			}

			.pro-left {
				width: 100rpx;
				display: flex;
			}

			.pro-con {
				display: flex;
				flex-direction: column;
			}

			.pro-right {
				width: 100rpx;
				display: flex;
				align-items: flex-end;
				justify-content: flex-start;

				.but-ks {
					display: flex;
					width: 54rpx;
					height: 54rpx;
					margin-bottom: 30rpx;
				}
			}
		}

		.pro-box-item2 {
			display: flex;
			justify-content: center;
			align-items: center;

			.pro-left,
			.pro-right {
				width: 100rpx;
				display: flex;
				justify-content: center;

				.but-l,
				.but-r {
					width: 41rpx;
					height: 52rpx;
				}
			}

			.pro-con {
				display: flex;
			}

		}

		.pro-con-txt {
			text-align: center;
			font-size: $font-sm;
			margin-bottom: 20rpx;
		}

		.t-button-b {
			display: flex;
			justify-content: center;

			.t-button {
				display: flex;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 25rpx;
				padding: 0 20rpx;
				background: $uni-but-bg-color;
				font-size: $font-sm;
				margin-bottom: 30rpx;
			}
		}
	}

	.page-content {
		width: 100vw;
		height: calc(100vh - 40rpx);
		background: $uni-bg-color;
		color: $font-color-w;
		padding: $page-row-spacing;

		.page-body2 {
			height: 100%;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		//内容
		.page-body {
			display: flex;
			height: 100%;
			width: 100%;

			.box-l {
				flex: 75;
				display: flex;
				flex-direction: column;
			}

			.box-r {
				flex: 25;
				display: flex;
				flex-direction: column;
			}
		}

		//头部
		.page-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;

			.t-logo {
				width: 239rpx;
				height: 40rpx;
			}

			.page-top-l {
				display: flex;

				.t-tit {
					font-size: $font-base;
				}

				.t-model {
					height: 40rpx;
					border-radius: 20rpx;
					padding: 0 16rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 40rpx;
					margin-left: 16rpx;
				}
			}

			.page-top-r {
				font-size: 28rpx;
				font-weight: 400;
				color: #DDDDDD;
			}
		}
	}
</style>
